<script lang="ts" setup>
import { getAllDevices } from '@/api/device';
import AddDeviceDigLog from '@/components/device/AddDeviceDigLog.vue';
import AddDeviceCollection from '@/components/room/AddDeviceCollection.vue';
import AddRoom from '@/components/room/AddRoom.vue';
import LightBrightness from '@/components/room/LightBrightness.vue';
import MyDevides from '@/components/room/MyDevides.vue';
import { useDeviceStore } from '@/stores/device';
import { useRoomStore } from '@/stores/room';
import { computed, nextTick, onMounted, ref, watch } from 'vue';



// 获取房间数据
const roomStore = useRoomStore()


// 获取一页的房间
const rooms_name = computed(() => {
  const startIndex = (pageNumber.value - 1) * 5;
  const endIndex = startIndex + 5;
  return roomStore.roomData.slice(startIndex, endIndex);
});

//切换界面
const pageNumber = ref(1);
const nextPage = computed(() => {
  const roomsLen = roomStore.roomData.length;
  if (pageNumber.value * 5 > roomsLen) {
    return '';
  }
  return '下一页';
});
const lastPage = computed(() => {
  if (pageNumber.value === 1) {
    return '';
  }
  return '上一页';
});
const setPageAdd = () => {
  const roomsLen = roomStore.roomData.length;
  if (pageNumber.value * 5 > roomsLen) {
    return;
  }
  pageNumber.value += 1;
};
const setPageMinus = () => {
  if (pageNumber.value === 1) {
    return;
  }
  pageNumber.value -= 1;
};

//高亮显示被点击的房间
const activeRoomId = ref<number | null>(null);
const handleClick = (roomId: number) => {
  activeRoomId.value = roomId
  getDeviceData(roomId)
  console.log(deviceStore.deviceAllData)
};


//获取房间内的 所有设备
const deviceStore = useDeviceStore()
const getDeviceData = async(roomId:number) => {
  const {data} = await getAllDevices(roomId)
  deviceStore.setDeviceData(data)
}

onMounted(async() =>{
 await roomStore.dataUserRoom()
   // 使用nextTick确保DOM更新完成之后执行
   await nextTick();

   if (roomStore.roomData.length > 0) {
    // 获取第一个房间的数据
    const firstRoomId = roomStore.roomData[0].roomId;
    handleClick(firstRoomId); // 调用handleClick以设置activeRoomId并获取设备数据
  }
})

// 监听 dialogDevice 的变化
watch(
  () => deviceStore.dialogDeivce,
  () => {
    if (roomStore.roomData.length > 0) {
    // 获取第一个房间的数据
    const firstRoomId = roomStore.roomData[0].roomId;
    handleClick(firstRoomId); // 调用handleClick以设置activeRoomId并获取设备数据
    }
  }
);

//添加设备集合




const deviceStroe = useDeviceStore()
</script>

<template>
  <div class="main">
    <div class="room_head">
      <div class="room_head_list">
        <el-button
          v-for="(room) in rooms_name"
          :key="room.roomId"
          ref="refClickRoom"
          :class="{ 'active': activeRoomId === room.roomId}"
          @click="handleClick(room.roomId)"
          type="primary">
          {{ room.roomName }}
        </el-button>
        <el-button @click="setPageMinus">{{ lastPage }}</el-button>
        <el-button @click="setPageAdd">{{ nextPage }}</el-button>
        <el-button @click="roomStore.showOnPage = true">+ Add Room</el-button>
        <el-button @click="roomStore.showOnCollectionsPage = true">+ Add device collection</el-button>

        <AddRoom />
        <AddDeviceCollection/>
      </div>
      <el-button class="active" @click="deviceStroe.setAddDeiviceFormVisible">+ Add Device</el-button>
    </div>
    <AddDeviceDigLog/>

    <div class="device_head" >
      <div class="device_head_left"  v-show="deviceStore.deviceAllData.length > 0">
        <AirConditioner />
      </div>

      <div class="device_head_right" v-if="deviceStore.deviceAllData.length > 0">
        <UsageStatusEchart />
      </div>
    </div>

    <div class="device_footer"   v-show="deviceStore.deviceAllData.length > 0">
      <div class="device_footer_left">
        <span>My Devides</span>
        <MyDevides />
      </div>
      <div class="device_footer_right" v-show="deviceStore.deviceAllData.length > 0">
        <span>Light</span>
        <LightBrightness />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.main {
  padding: 0 30px;
}

.room_head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .room_head_list {
    display: flex;
    gap: 20px;
  }
  .el-button {
    background-color: transparent; /* 默认背景色为透明 */
    color: rgb(255, 255, 255); /* 默认文字颜色 */
    border: 1px solid #ccc; /* 默认边框 */
    border: none;
    padding: 10px 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 过渡效果 */
  }
  .el-button.active {
    background: linear-gradient(90deg, #aaf7ff, #e5c1ff);
    color: black;
  }
}

.device_head {
  display: flex;
  gap: 30px;
  .device_head_left {
    flex: 1 0 33.3333%;
    // background-color: #252525;
  }
  .device_head_right {
    flex: 1 0 66.6666%;
    // background-color: #e5c1ff;
  }
}

.device_footer {
  display: flex;
  gap: 20px;
  .device_footer_left {
    flex: 1 0 75%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    // background-color: #aaf7ff;
    span {
      font-size: 20px;
      color: white;
    }
  }
  .device_footer_right {
    color:white;
    font-size: 20px;
    flex: 1 0 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style>
